<template>
  <div>
    <!-- 头部返回 -->
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      right-text="编辑"
      @click-right="onClickRight"
    />
    <!-- 头像部分 -->

    <div class="image-box">
      <!--  <van-uploader :after-read="afterRead"  v-model="fileList" multiple :max-count="1"/> -->
      <van-image round width="10rem" height="10rem" fit="cover" :src="userInfo.avatar" />
    </div>

    <!-- 个人信息部分 -->
    <van-cell-group>
      <van-cell title="账号:" :value="this.userInfo.loginName" />
      <van-cell title="昵称:" :value="this.userInfo.userName"/>
      <van-cell title="手机号:" :value="this.userInfo.phonenumber"/>
      <van-cell title="邮箱:" :value="this.userInfo.email"/>
    </van-cell-group>

    <!-- 退出登录 -->
    <van-button type="default" block class="my-button" @click="exit">退出登录</van-button>
  </div>
</template>

<script>
import { checkInfo, logOut, changeImg } from "../../api/forum-api.js";

export default {
  data() {
    return {
      tel: "",
      text: "",
      password: "",
      newpassword: "",
      show: false,
      userInfo: {},
      fileList: [],
      url: ""
    };
  },
  created() {
    //登录之后查看个人信息
    checkInfo().then(res => {
      console.log(res.data);
      this.userInfo = res.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    exit() {
      //退出登录
      logOut().then(res => {
        console.log(res);
        this.$router.push({
          path: "/login"
        });
      });
    },
    onClickRight() {
      this.$router.push({
        path: "/updateInfo"
      });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      changeImg(file.file).then(res => {
        //debugger;
        this.url = res.url;
        console.log(this.url);
        console.log(res);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.image-box {
  width: 180px;
  margin: auto;
}
.my-button {
  margin-top: 5px;
}
</style>

